import React from 'react'
import { Link } from 'react-router-dom'

import NavHeader from '../../components/NavHeader'
import { Toast } from 'antd-mobile'

import { List, AutoSizer, WindowScroller, InfiniteLoader } from 'react-virtualized'
// 导入自定义的axios
import { API } from '../../utils/api'

import HouseItem from '../../components/HouseItem'

// 导入基础路径
import { BASE_URL } from '../../utils/url'

// 导入吸顶组件
import Sticky from '../../components/Sticky'

import NoHouse from '../../components/NoHouse'

import styles from './index.module.css'
import './index.scss'

class Favor extends React.Component {
  state = {
    favorList: [],
    count: 0,
    isLoading: false
  }
  async getFavorList() {
    // 开启loading
    Toast.loading('加载中...', 0, null, false)
    this.setState({
      isLoading: true
    })
    const res = await API.get('/user/favorites')
    const list = res.data.body
    const count = list.length

    // 关闭loading
    Toast.hide()
    this.setState({
      favorList: list,
      isLoading: false,
      count
    })
  }

  async componentDidMount() {
    // 获取数据初始化
    await this.getFavorList()
  }

  // 渲染每个收藏项
  renderHouseList = ({
    key,
    index,
    style,
  }) => {
    // 根据索引号获取当前行的房屋数据
    const { favorList } = this.state
    const house = favorList[index]

    // 判断house是否存在
    // 不存在渲染 loading 图片
    if (!house) {
      return (<div key={key} style={style}>
        <p className={styles.loading}></p>
      </div>)
    }

    return (
      <HouseItem key={key} style={style} src={BASE_URL + house.houseImg} title={house.title} desc={house.desc} tags={house.tags} price={house.price} onClick={() => this.props.history.push(`/detail/${house.houseCode}`)}></HouseItem>
    )
  }

  // 渲染收藏列表
  renderList() {
    const { count, isLoading } = this.state

    // 关键在数据加载完成后再进行判断
    if (count === 0 && isLoading === false) {
      return <NoHouse>没有收藏房源，赶紧去<Link className="linkBlue" to="/home/list">这里</Link>收藏一个吧~</NoHouse>
    }
    return (
      <WindowScroller>
        {({ height, isScrolling, scrollTop }) => (
          <AutoSizer>
            {({ width }) => (
              <List
                // onRowsRendered={onRowsRendered}
                // ref={registerChild}
                autoHeight  //设置真正的高度
                width={width} //视口的宽度
                height={height} //视口的高度
                rowCount={count}  //List列表项的行数
                rowHeight={120}  //设定每一行的高度
                rowRenderer={this.renderHouseList} //渲染列表项的每一行
                isScrolling={isScrolling}
                scrollTop={scrollTop}
              />
            )}
          </AutoSizer>
        )}
      </WindowScroller>
    )
  }

  render() {
    return (
      <div>
        {/* 顶部导航栏 */}
        <Sticky height={45}>
          <NavHeader name="收藏列表" onLeftClick={() => {
            console.log('点击了左侧按钮')
          }} >收藏列表</NavHeader>
        </Sticky>


        {/* 收藏列表 */}
        <div>
          {this.renderList()}
        </div>
      </div>
    )
  }
}

export default Favor